<template>
  <nut-card
      :img-url="data.productImg+ImgWaterMarker"
      :title="data.name"
      :price="data.price"
      :vip-price="data.vipPrice"
      :shop-desc="data.detailDesc"
      :delivery="data.delivery"
      :shop-name="data.enterpriseName"
      style="background: white;margin-bottom: 2px"
  >
    <template #shop-tag>
      <view class="commodity-spec-box" v-if="data.specs">
        规格：{{ data.specs }}
      </view>
    </template>
    <template #price>
<!--      <span>询价</span>-->
      <view style="display: flex;justify-content: space-between;width: 100%">
        <nut-price v-if="data.price" :price="data.price" size="normal" />

        <view v-else style="display: flex;align-items: center " >
          <IconFont name="message" size="13" color="#f00" ></IconFont>&nbsp;
          <span style="font-size: 12px;color:#f00 ">询价</span>
        </view>


        <view style="display: flex;font-size: 12px;color: #ccc;align-items: center">
          <IconFont name="eye" size="13" color="#ccc"></IconFont>&nbsp;<span>{{ data.scanNum }}</span>
        </view>
      </view>



    </template>
    <template #origin>
      &nbsp;
    </template>
  </nut-card>
</template>
<script setup  >


import {ref} from "vue";
import {IconFont} from "@nutui/icons-vue";
import Taro from "@tarojs/taro";
import {ImgWaterMarker} from "../../api/constant";



const props = defineProps({
  data: {
    type: Object,
    default: {}
  }
});

const askPrice = () => {
  Taro.makePhoneCall({phoneNumber: props.data.contactPhone})
}

</script>


<style  >


.commodity-spec-box{
  width: 400px;
  font-size: 22px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

</style>